<template>
    <basic-container>
        <el-form ref="queryForm"
                 :model="queryParams"
                 :inline="true"
                 label-width="80px">
            <#list executeMap.columns as fieldInfo>
                <#if fieldInfo.isQuery=='1'>
                    <#if fieldInfo.javaType=='Date'>
                        <el-form-item label="${fieldInfo.columnComment}"
                                      prop="searchParams.search_dt_between_${fieldInfo.javaField}">
                            <el-date-picker
                                    v-model="queryParams.searchParams.search_dt_between_${fieldInfo.javaField}"
                                    type="daterange"
                                    align="right"
                                    unlink-panels
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    value-format="yyyy-MM-dd">
                            </el-date-picker>
                        </el-form-item>
                    <#elseif fieldInfo.dictType?trim?length gt 1>
                        <el-form-item label="${fieldInfo.columnComment}"
                                      prop="searchParams.search_eq_${fieldInfo.javaField}">
                            <el-select v-model="queryParams.searchParams.search_eq_${fieldInfo.javaField}" placeholder="请选择">
                                <el-option
                                        v-for="dict in ${fieldInfo.javaField}Options"
                                        :key="dict.dictValue"
                                        :label="dict.dictLabel"
                                        :value="dict.dictValue">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    <#else>
                        <el-form-item label="${fieldInfo.columnComment}"
                                      prop="searchParams.search_eq_${fieldInfo.javaField}">
                            <el-input v-model="queryParams.searchParams.search_eq_${fieldInfo.javaField}"
                                      placeholder="请输入${fieldInfo.columnComment}"/>
                        </el-form-item>
                    </#if>
                </#if>
            </#list>
            <el-form-item>
                <el-button type="primary"
                           icon="el-icon-search"
                           size="mini"
                           @click="handleQuery">搜索
                </el-button>
                <el-button icon="el-icon-refresh"
                           size="mini"
                           @click="resetQuery">重置
                </el-button>
            </el-form-item>
        </el-form>


        <el-row :gutter="10"
                class="mb8">
            <el-col :span="1.5">
                <el-button type="primary"
                           icon="el-icon-plus"
                           size="mini"
                           @click="handleAdd"
                >新增
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                        type="success"
                        icon="el-icon-edit"
                        size="mini"
                        :disabled="single"
                        @click="handleUpdate"
                >编辑
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                        type="danger"
                        icon="el-icon-delete"
                        size="mini"
                        :disabled="multiple"
                        @click="handleDelete"
                >删除
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                        type="warning"
                        icon="el-icon-download"
                        size="mini"
                >导出
                </el-button>
            </el-col>
        </el-row>
        <el-table v-loading="loading"
                  :data="${lowerEntity}List"
                  @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center"/>
            <#list executeMap.columns as fieldInfo>
                <#if fieldInfo.isList=='1'>
                    <#if fieldInfo.javaType=='Date'>
                        <el-table-column label="${fieldInfo.columnComment}" align="center" prop="${fieldInfo.javaField}" :formatter="date${fieldInfo.javaField}Format"/>
                    <#else >
                        <#if fieldInfo.dictType?trim?length gt 1>
                            <el-table-column label="${fieldInfo.columnComment}" align="center" prop="${fieldInfo.javaField}" :formatter="${fieldInfo.javaField}StrFormat"/>
                        <#else>
                            <el-table-column label="${fieldInfo.columnComment}" align="center" prop="${fieldInfo.javaField}"/>
                        </#if>
                    </#if>

                </#if>
            </#list>
            <el-table-column label="操作"
                             align="center"
                             class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button-group>
                        <el-button size="small"
                                   type="text"
                                   icon="el-icon-edit"
                                   @click="handleUpdate(scope.row)"
                        >编辑
                        </el-button>
                        <el-button size="small"
                                   type="text"
                                   icon="el-icon-delete"
                                   class="deleteBtn"
                                   @click="handleDelete(scope.row)"
                        >删除
                        </el-button>
                    </el-button-group>

                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total>0"
                    :total="total"
                    :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getList"/>


        <!-- 添加或编辑收费员信息对话框 -->
        <el-dialog :title="title[statusDialog]"
                   :visible.sync="open"
                   width="60%"
                   append-to-body
                   :close-on-click-modal="false">
            <el-form ref="form"
                     :model="form"
                     :rules="rules"
                     label-width="80px">
                <template v-if="statusDialog=='add'">
                    <#list executeMap.columns as fieldInfo>
                        <#if fieldInfo.isInsert=='1'>
                            <#if fieldInfo.dictType?trim?length gt 1>
                                <el-form-item label="${fieldInfo.columnComment}"
                                              prop="${fieldInfo.javaField}">
                                    <el-radio-group v-model="form.${fieldInfo.javaField}">
                                        <el-radio v-for="dict in ${fieldInfo.javaField}Options"
                                                  :key="dict.dictValue"
                                                  :label="dict.dictValue">{{dict.dictLabel}}
                                        </el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            <#else >
                                <el-form-item label="${fieldInfo.columnComment}"
                                              prop="${fieldInfo.javaField}">
                                    <el-input v-model="form.${fieldInfo.javaField}"
                                              placeholder="请输入${fieldInfo.columnComment}"/>
                                </el-form-item>
                            </#if>
                        </#if>
                    </#list>
                </template>
                <template v-if="statusDialog=='edit'">
                    <#list executeMap.columns as fieldInfo>
                        <#if fieldInfo.isEdit=='1'>
                            <#if fieldInfo.dictType?trim?length gt 1>
                                <el-form-item label="${fieldInfo.columnComment}"
                                              prop="${fieldInfo.javaField}">
                                    <el-radio-group v-model="form.${fieldInfo.javaField}">
                                        <el-radio v-for="dict in ${fieldInfo.javaField}Options"
                                                  :key="dict.dictValue"
                                                  :label="dict.dictValue">{{dict.dictLabel}}
                                        </el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            <#else >
                                <el-form-item label="${fieldInfo.columnComment}"
                                              prop="${fieldInfo.javaField}">
                                    <el-input v-model="form.${fieldInfo.javaField}"
                                              placeholder="请输入${fieldInfo.columnComment}"/>
                                </el-form-item>
                            </#if>
                        </#if>
                    </#list>
                </template>

            </el-form>
            <div slot="footer"
                 class="dialog-footer">
                <el-button type="primary"
                           @click="submitForm">确 定
                </el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>


    </basic-container>
</template>
index.js.ftl
<script>
    import {add${entity}, del${entity},list${entity}, update${entity}} from "@/api/${executeMap.moduleName}/${executeMap.businessName}";
    import {dateFormat} from '@/util/date'

    export default {
        data() {
            return {
                // 遮罩层
                loading: true,
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 总条数
                total: 0,
                // 用户信息表格数据
                ${lowerEntity}List: [],
                <#list executeMap.columns as fieldInfo>
                    <#if fieldInfo.dictType?trim?length gt 1>
                       ${fieldInfo.javaField}Options=[],
                    </#if>
                </#list>
                // 弹出层标题
                title: {
                    add: '新增${executeMap.tableComment}',
                    edit: '编辑{executeMap.tableComment}'
                },
                statusDialog: "",
                // 是否显示弹出层
                open: false,
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    searchParams: {
                        <#list executeMap.columns as fieldInfo>
                            <#if fieldInfo.isQuery=='1'>
                                <#if fieldInfo.javaType=='Date'>
                                   search_dt_between_${fieldInfo.javaField}: undefined,
                                <#else>
                                   search_eq_${fieldInfo.javaField}: undefined,
                                </#if>
                            </#if>
                        </#list>
                    }
                },
                // 表单参数
                form: {},
                // 表单校验
                rules: {
                    <#list executeMap.columns as fieldInfo>
                        <#if fieldInfo.isRequired=='1'>
                            ${fieldInfo.javaField}: [
                                {required: true, message: "${fieldInfo.columnComment}不能为空", trigger: "blur"}
                            ],
                        </#if>
                    </#list>
                }

            }

        },
        created() {
            this.getList();
            <#list executeMap.columns as fieldInfo>
                <#if fieldInfo.dictType?trim?length gt 1>
                    this.getDicts("sys_status").then(response => {
                        this.${fieldInfo.javaField}Options = response.data.data;
                    });
                </#if>
            </#list>

        },
        computed: {

        },
        methods: {
            /** 搜索按钮操作 */
            handleQuery() {
                for (let key in this.queryParams.searchParams) {
                    if(this.queryParams.searchParams[key]!=undefined){
                        if (this.queryParams.searchParams[key] == "") {
                            this.queryParams.searchParams[key] = undefined;
                            continue;
                        }
                        if(this.queryParams.searchParams[key].length>0){
                            if(!this.queryParams.searchParams[key].constructor == Array){
                                if(!(this.queryParams.searchParams[key].replace(" ", "").trim().length > 0)){
                                    this.queryParams.searchParams[key] = undefined;
                                    continue;
                                }
                            }
                        }
                    }
                }
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm("queryForm");
                this.handleQuery();
            },
            // 取消按钮
            cancel() {
                this.open = false;
                this.reset();
            },
            // 表单重置
            reset() {
                this.form = {
                    <#list table.fields as fieldInfo>
                        ${fieldInfo.propertyName}: undefined,
                    </#list>
                };
                this.resetForm("form");
            },
            /** 查询收费员信息列表 */
            getList() {
                this.loading = true;
                list${entity}(this.queryParams).then(response => {
                    const data = response.data;
                    if (response.status === 200 && data.code === "00") {
                        this.${lowerEntity}List = data.data.rows;
                        this.total = data.data.total;
                    } else {
                        this.msgError(data.msg);
                    }
                    this.loading = false;
                });
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                // this.ids = selection.map(item => item.id)
                this.ids = selection;
                this.single = selection.length != 1;
                this.multiple = !selection.length;
            },
            /** 新增按钮操作 */
            handleAdd() {
                this.reset();
                this.open = true;
                this.statusDialog = 'add';
            },
            /** 编辑按钮操作 */
            handleUpdate(row) {
                if (row.id) {
                    this.form =  this.deepClone(row);
                } else {
                    this.form =  this.deepClone(this.ids[0]);
                }
                this.open = true;
                this.statusDialog = 'edit';
            },
            /** 提交按钮 */
            submitForm: function () {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        if (this.form.id != undefined) {
                            update${entity}(this.form).then(response => {
                                const data = response.data;
                                if (response.status === 200 && data.code === "00") {
                                    this.msgSuccess("编辑成功");
                                    this.open = false;
                                    this.getList();
                                } else {
                                    this.msgError(response.msg);
                                }
                            });
                        } else {
                            add${entity}(this.form).then(response => {
                                const data = response.data;
                                if (response.status === 200 && data.code === "00") {
                                    this.msgSuccess("新增成功");
                                    this.open = false;
                                    this.getList();
                                } else {
                                    this.msgError(response.msg);
                                }
                            });
                        }
                    }
                });
            },
            /** 删除按钮操作 */
            handleDelete(row) {
                const ${lowerEntity}Ids = row.id || this.ids;
                let tt='';
                if(row.id==undefined){
                    tt='是否确认删除【' + this.ids.length + '】条数据吗?';
                }else{
                    tt='是否确认删除为"' + row.id + '"的数据项?';
                }
                this.$confirm(tt, "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function () {
                    return del${entity}(${lowerEntity}Ids);
                }).then(() => {
                    this.getList();
                    this.msgSuccess("删除成功");
                }).catch(function () {
                });
            },
            <#list executeMap.columns as fieldInfo>
                <#if fieldInfo.isList=='1'>
                    <#if fieldInfo.javaType=='Date'>
                         date${fieldInfo.javaField}Format(row){
                             if (row.${fieldInfo.javaField} == null) {
                                 return "/";
                             }
                             return dateFormat(new Date(row.${fieldInfo.javaField}));
                         },
                    <#elseif fieldInfo.dictType?trim?length gt 1>
                        ${fieldInfo.javaField}StrFormat(row){
                            return this.selectDictLabel(this.${fieldInfo.javaField}Options,row.${fieldInfo.javaField});
                        },
                    </#if>
                </#if>
            </#list>

        }
    };
</script>

<style>

</style>
